.with-sidebar {
  position: relative;

  .main-content-body {
    padding-left: 16rem;
  }

  .fixed-sidebar {
    display: block;
    padding: 0 1rem;
    margin-top: 2rem;
    position: fixed;
    top: 0;
    padding-top: 290px;
    width: 16rem;
    font-size: 0.875rem;

    .back-top {
      display: none;
      margin-bottom: 1rem;
      font-weight: bold;
    }

    ul {
      padding-left: 1rem;
      list-style: none;
      margin-bottom: 0.875rem;
    }

    &.scrolled {
      position: fixed;
      top: 0;

      .back-top {
        display: block;
      }
    }

    .examples-menu {
      a.active {
        font-weight: bold;
      }
    }
  }
}

@media screen and (max-width: 64em) {
  .with-sidebar {
    .fixed-sidebar {
      display: none;
    }
  }
}

@media screen and (min-width: 42em) and (max-width: 64em) {
  .with-sidebar {
    padding: 2rem 4rem;
  }
}

@media screen and (max-width: 42em) {
  .with-sidebar {
    padding: 2rem 1rem;
  }
}
